<template>
  <div class="entertainment-list">
    <!-- 添加标签页 -->
    <el-tabs v-model="activeTab" type="card">
      <!-- 餐饮娱乐标签页 -->
      <el-tab-pane label="餐饮娱乐" name="venue">
        <!-- 搜索区域 -->
        <el-card class="search-card">
          <el-form :inline="true" :model="venueSearchForm" class="search-form">
            <el-form-item label="名称">
              <el-input v-model="venueSearchForm.name" placeholder="请输入商家名称"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="venueSearchForm.type" placeholder="请选择类型">
                <el-option label="餐饮" value="food"></el-option>
                <el-option label="娱乐" value="entertainment"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="营业时间">
              <el-select v-model="venueSearchForm.timeSlot" placeholder="请选择时段">
                <el-option label="全天营业" value="allday"></el-option>
                <el-option label="早市" value="morning"></el-option>
                <el-option label="午市" value="noon"></el-option>
                <el-option label="晚市" value="evening"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleVenueSearch">搜索</el-button>
              <el-button @click="resetVenueSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 商家列表 -->
        <div class="venue-grid">
          <el-row :gutter="20">
            <el-col :span="8" v-for="venue in venueList" :key="venue.id">
              <el-card class="venue-card" shadow="hover">
                <img :src="venue.image" class="venue-image">
                <div class="venue-info">
                  <div class="venue-header">
                    <h3>{{ venue.name }}</h3>
                    <el-tag :type="venue.type === 'food' ? 'success' : 'warning'" size="small">
                      {{ venue.type === 'food' ? '餐饮' : '娱乐' }}
                    </el-tag>
                  </div>
                  
                  <div class="venue-rating">
                    <el-rate
                      v-model="venue.rating"
                      disabled
                      show-score
                      text-color="#ff9900">
                    </el-rate>
                    <span class="review-count">({{ venue.reviewCount }}条评价)</span>
                  </div>

                  <div class="venue-tags">
                    <el-tag 
                      size="mini" 
                      v-for="(tag, index) in venue.tags" 
                      :key="index"
                      type="info">
                      {{ tag }}
                    </el-tag>
                  </div>

                  <div class="venue-business">
                    <i class="el-icon-time"></i>
                    <span>营业时间: {{ venue.businessHours }}</span>
                  </div>

                  <div class="venue-address">
                    <i class="el-icon-location"></i>
                    <span>{{ venue.address }}</span>
                  </div>

                  <div class="venue-price">
                    <span class="price">¥{{ venue.averagePrice }}</span>/人
                    <el-button 
                      type="primary" 
                      size="small" 
                      @click="showDetails(venue)">
                      查看详情
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[9, 18, 36]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

      <!-- 演出团体标签页 -->
      <el-tab-pane label="演出团体" name="performance">
        <!-- 演出团体搜索区域 -->
        <el-card class="search-card">
          <el-form :inline="true" :model="performSearchForm" class="search-form">
            <el-form-item label="团体名称">
              <el-input v-model="performSearchForm.name" placeholder="请输入团体名称"></el-input>
            </el-form-item>
            <el-form-item label="演出类型">
              <el-select v-model="performSearchForm.type" placeholder="请选择类型">
                <el-option label="民族表演" value="folk"></el-option>
                <el-option label="杂技表演" value="acrobatics"></el-option>
                <el-option label="音乐演出" value="music"></el-option>
                <el-option label="舞蹈表演" value="dance"></el-option>
                <el-option label="戏曲表演" value="opera"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="演出时间">
              <el-date-picker
                v-model="performSearchForm.date"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handlePerformSearch">搜索</el-button>
              <el-button @click="resetPerformSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 演出团体列表 -->
        <div class="performance-grid">
          <el-row :gutter="20">
            <el-col :span="8" v-for="team in performanceList" :key="team.id">
              <el-card class="performance-card" shadow="hover">
                <img :src="team.image" class="performance-image">
                <div class="performance-info">
                  <div class="performance-header">
                    <h3>{{ team.name }}</h3>
                    <el-tag size="small" :type="team.type | performanceTypeFilter">
                      {{ team.type | performanceTypeName }}
                    </el-tag>
                  </div>

                  <div class="performance-schedule">
                    <h4>近期演出</h4>
                    <div class="schedule-list">
                      <div v-for="(schedule, index) in team.schedules" :key="index" class="schedule-item">
                        <span class="schedule-date">{{ schedule.date }}</span>
                        <span class="schedule-time">{{ schedule.time }}</span>
                        <el-tag 
                          size="mini" 
                          :type="schedule.status === '可预订' ? 'success' : 'info'">
                          {{ schedule.status }}
                        </el-tag>
                      </div>
                    </div>
                  </div>

                  <div class="performance-description">
                    {{ team.description }}
                  </div>

                  <div class="performance-actions">
                    <span class="price">¥{{ team.price }}起</span>
                    <el-button 
                      type="primary" 
                      size="small" 
                      @click="showPerformanceDetails(team)">
                      查看详情
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 演出团体分页 -->
        <div class="pagination">
          <el-pagination
            @size-change="handlePerformSizeChange"
            @current-change="handlePerformCurrentChange"
            :current-page="performPagination.currentPage"
            :page-sizes="[9, 18, 36]"
            :page-size="performPagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="performPagination.total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 演出团体详情对话框 -->
    <el-dialog
      :title="selectedTeam ? selectedTeam.name : ''"
      :visible.sync="performanceDialogVisible"
      width="70%">
      <div v-if="selectedTeam" class="performance-details">
        <!-- 团体照片展示 -->
        <el-carousel height="400px">
          <el-carousel-item v-for="(img, index) in selectedTeam.images" :key="index">
            <img :src="img" class="detail-image">
          </el-carousel-item>
        </el-carousel>

        <!-- 团体详细信息 -->
        <div class="detail-info">
          <h4>团体简介</h4>
          <p>{{ selectedTeam.introduction }}</p>

          <h4>演出信息</h4>
          <el-table :data="selectedTeam.performances" style="width: 100%">
            <el-table-column prop="name" label="节目名称"></el-table-column>
            <el-table-column prop="duration" label="演出时长"></el-table-column>
            <el-table-column prop="price" label="票价">
              <template slot-scope="scope">
                ¥{{ scope.row.price }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button 
                  type="primary" 
                  size="mini"
                  @click="handleBooking(scope.row)">
                  预订
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <h4>演出场地</h4>
          <p><i class="el-icon-location"></i> {{ selectedTeam.venue }}</p>

          <h4>联系方式</h4>
          <p><i class="el-icon-phone"></i> {{ selectedTeam.contact }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'EntertainmentList',
  filters: {
    performanceTypeName(value) {
      const types = {
        folk: '民族表演',
        acrobatics: '杂技表演',
        music: '音乐演出',
        dance: '舞蹈表演',
        opera: '戏曲表演'
      }
      return types[value] || value
    },
    performanceTypeFilter(value) {
      const types = {
        folk: 'success',
        acrobatics: 'warning',
        music: 'primary',
        dance: 'info',
        opera: 'danger'
      }
      return types[value] || ''
    }
  },
  data() {
    return {
      activeTab: 'venue',
      // 原有的餐饮娱乐数据
      venueSearchForm: {
        name: '',
        type: '',
        timeSlot: ''
      },
      currentPage: 1,
      pageSize: 9,
      total: 0,
      venueList: [], // 这里将由后端数据填充
      detailDialogVisible: false,
      selectedVenue: null,

      // 新增演出团体相关数据
      performSearchForm: {
        name: '',
        type: '',
        date: ''
      },
      performanceList: [], // 演出团体列表
      performPagination: {
        currentPage: 1,
        pageSize: 9,
        total: 0
      },
      selectedTeam: null,
      performanceDialogVisible: false
    }
  },
  methods: {
    // 原有的餐饮娱乐方法保持不变
    handleVenueSearch() {
      // 调用后端搜索接口
    },
    resetVenueSearch() {
      this.venueSearchForm = {
        name: '',
        type: '',
        timeSlot: ''
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // 重新加载数据
    },
    showDetails(venue) {
      this.selectedVenue = venue
      this.detailDialogVisible = true
    },

    // 演出团体相关方法
    handlePerformSearch() {
      // 调用后端搜索接口
    },
    resetPerformSearch() {
      this.performSearchForm = {
        name: '',
        type: '',
        date: ''
      }
    },
    handlePerformSizeChange(val) {
      this.performPagination.pageSize = val
      // 重新加载数据
    },
    handlePerformCurrentChange(val) {
      this.performPagination.currentPage = val
      // 重新加载数据
    },
    showPerformanceDetails(team) {
      this.selectedTeam = team
      this.performanceDialogVisible = true
    },
    handleBooking(performance) {
      // 处理预订逻辑
      this.$message.success('预订功能开发中...')
    }
  }
}
</script>

<style scoped>
.entertainment-list {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.venue-grid {
  margin-bottom: 20px;
}

.venue-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.venue-card:hover {
  transform: translateY(-5px);
}

.venue-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.venue-info {
  padding: 15px;
}

.venue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.venue-header h3 {
  margin: 0;
  font-size: 18px;
}

.venue-rating {
  margin-bottom: 10px;
}

.review-count {
  font-size: 12px;
  color: #909399;
  margin-left: 5px;
}

.venue-tags {
  margin-bottom: 10px;
}

.venue-tags .el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.venue-business, .venue-address {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}

.venue-business i, .venue-address i {
  margin-right: 5px;
}

.venue-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.price {
  color: #F56C6C;
  font-size: 20px;
  font-weight: bold;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info {
  padding: 20px;
}

.detail-info h4 {
  margin: 20px 0 10px 0;
  color: #303133;
}

.detail-info p {
  margin: 10px 0;
  color: #606266;
}

.detail-info i {
  margin-right: 5px;
}

/* 新增演出团体相关样式 */
.performance-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.performance-card:hover {
  transform: translateY(-5px);
}

.performance-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.performance-info {
  padding: 15px;
}

.performance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.performance-header h3 {
  margin: 0;
  font-size: 18px;
}

.performance-schedule {
  margin-bottom: 15px;
}

.performance-schedule h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #606266;
}

.schedule-list {
  font-size: 13px;
}

.schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px;
  background: #f5f7fa;
  border-radius: 4px;
}

.schedule-date {
  color: #606266;
}

.schedule-time {
  color: #909399;
}

.performance-description {
  margin: 15px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.performance-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.price {
  color: #F56C6C;
  font-size: 20px;
  font-weight: bold;
}

.detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info {
  padding: 20px;
}

.detail-info h4 {
  margin: 20px 0 10px 0;
  color: #303133;
}

.detail-info p {
  margin: 10px 0;
  color: #606266;
  line-height: 1.6;
}

.detail-info i {
  margin-right: 5px;
}
</style> 